<template>
  <view class="page register">
    <view class="content">
      <view class="title">
        <image
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/register/title.png"
          mode="scaleToFill"
        />
      </view>
      <view class="box">
        <view class="text"> 欢迎注册 </view>
        <view class="form">
          <u-form
            :model="form"
            :rules="rules"
            ref="uForm"
            :error-type="['toast']"
          >
            <u-form-item prop="telPhone">
              <view class="form_img">
                <image
                  style="width: 30rpx"
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/register/icon1.png"
                  mode="widthFix"
                />
              </view>
              <u-input
                type="number"
                placeholder="请输入手机号码"
                placeholder-style="color: #CCCCCF;"
                v-model="form.telPhone"
                maxlength="11"
              />
            </u-form-item>
            <u-form-item prop="yzm">
              <view class="form_img">
                <image
                  style="width: 30rpx"
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/register/icon2.png"
                  mode="widthFix"
                />
              </view>
              <u-input
                type="number"
                placeholder="输入账号"
                placeholder-style="color: #CCCCCF;"
                v-model="form.yzm"
                maxlength="6"
              />
              <view class="code">
                <u-verification-code
                  @end="end"
                  @start="start"
                  ref="uCode"
                  @change="codeChange"
                  change-text="X秒后获取"
                ></u-verification-code>
                <u-button class="code_btn" @tap="getCode">{{ tips }}</u-button>
              </view>
            </u-form-item>
            <u-form-item prop="loginPwd">
              <view class="form_img">
                <image
                  style="width: 32rpx"
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/register/icon3.png"
                  mode="widthFix"
                />
              </view>
              <u-input
                type="password"
                placeholder="请输入密码"
                v-model="form.loginPwd"
                placeholder-style="color: #CCCCCF;"
              />
            </u-form-item>
            <u-form-item prop="reLoginPwd">
              <view class="form_img">
                <image
                  style="width: 32rpx"
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/register/icon3.png"
                  mode="widthFix"
                />
              </view>
              <u-input
                type="password"
                placeholder="请再次输入密码"
                v-model="form.reLoginPwd"
                placeholder-style="color: #CCCCCF;"
              />
            </u-form-item>
            <u-form-item prop="grade">
              <view class="form_img">
                <image
                  style="width: 42rpx"
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/register/icon4.png"
                  mode="widthFix"
                />
              </view>
              <u-input
                :border="false"
                type="select"
                :select-open="selectShow"
                v-model="form.grade"
                placeholder="请选择年级"
              >
              </u-input>
              <view class="input_bg" @click="handleSelect"> </view>
            </u-form-item>
            <u-form-item prop="userName">
              <view class="form_img">
                <image
                  style="width: 34rpx"
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/register/icon5.png"
                  mode="widthFix"
                />
              </view>
              <u-input
                type="text"
                placeholder="请输入姓名"
                placeholder-style="color: #CCCCCF;"
                v-model="form.userName"
              />
            </u-form-item>
          </u-form>
        </view>
        <view class="btn">
          <text @click="register()">注册</text>
          <view class="login" @click.stop="login()">有账号去登录</view>
        </view>
      </view>
    </view>

    <u-select
      mode="single-column"
      :list="gradeList"
      v-model="selectShow"
      @confirm="selectConfirm"
      value-name="id"
      label-name="gradeName"
    ></u-select>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import { sendCode } from "@/api/common";
import { register } from "@/api/login";
import { getGradeList } from "@/api/sync";
export default {
  data() {
    return {
      // 基础表单数据
      form: {
        telPhone: "",
        yzm: "",
        loginPwd: "",
        reLoginPwd: "",
        grade: "",
        userName: "",
        eqCode: "",
      },
      styles: {
        color: "#cccccf",
        borderColor: "rgba(0,0,0,0)",
        backgroundColor: "rgba(0,0,0,0)",
      },
      tips: "",
      rules: {
        telPhone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["change", "blur"],
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // this.$u.test.mobile()就是返回true或者false的
              return this.$u.test.mobile(value);
            },
            message: "手机号码不正确",
            // 触发器可以同时用blur和change
            trigger: ["change", "blur"],
          },
        ],
        yzm: [
          {
            required: true,
            message: "请输入验证码",
            trigger: ["change", "blur"],
          },
        ],
        loginPwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["change", "blur"],
          },
        ],
        reLoginPwd: [
          {
            required: true,
            message: "请再次输入密码",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              return this.form.loginPwd === value;
            },
            message: "两次输入密码不一致",
          },
        ],
        grade: [
          {
            required: true,
            message: "请选择年级",
            trigger: ["change"],
          },
        ],
        userName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: ["change", "blur"],
          },
        ],
      },
      selectShow: false,
      gradeList: [],
      deviceInfo: {},
    };
  },
  onLoad() {
    this.getDict();
    this.getDeviceInfo();
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    getDeviceInfo() {
      this.form.eqCode = this.getSerialCode();
    },
    getDict() {
      getGradeList().then((res) => {
        this.gradeList = res.data;
      });
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if (!this.form.telPhone) {
        this.$u.toast("请输入手机号");
        return;
      }
      if (!this.$u.test.mobile(this.form.telPhone)) {
        this.$u.toast("手机号码不正确");
        return;
      }
      if (this.$refs.uCode.canGetCode) {
        uni.showLoading({
          title: "正在获取验证码",
        });
        sendCode({
          telPhone: this.form.telPhone,
        }).then((res) => {
          uni.hideLoading();
          this.$refs.uCode.start();
        });
      }
    },
    end() {},
    start() {},
    register() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          let params = {
            telPhone: this.form.telPhone,
            yzm: this.form.yzm,
            loginPwd: this.form.loginPwd,
            reLoginPwd: this.form.reLoginPwd,
            grade: this.gradeList.find((item) => {
              return item.gradeName === this.form.grade;
            }).id,
            userName: this.form.userName,
            eqCode: this.form.eqCode,
          };
          register(params).then((res) => {
            this.$u.toast("注册成功");
            this.$refs.uForm.resetFields();
            this.login();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    login() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    handleSelect() {
      this.selectShow = true;
    },
    selectConfirm(e) {
      this.form.grade = "";
      e.map((val, index) => {
        this.form.grade += this.form.grade == "" ? val.label : "-" + val.label;
      });
    },
    getSerialCode() {
      var Build = plus.android.importClass("android.os.Build");
      var Manifest = plus.android.importClass("android.Manifest");
      var MainActivity = plus.android.runtimeMainActivity();
      var SystemProperties = plus.android.importClass(
        "android.os.SystemProperties"
      );
      var serial = "";
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
        //9.0+
        var ArrPermissions = [Manifest.permission.READ_PHONE_STATE];
        function PermissionCheck(permission) {
          if (Build.VERSION.SDK_INT >= 23) {
            if (MainActivity.checkSelfPermission(permission) == -1) {
              return false;
            }
          }
          return true;
        }

        function PermissionChecks(Arr) {
          var HasPermission = true;
          for (var index in Arr) {
            var permission = Arr[index];
            //如果此处没有权限,则是用户拒绝了
            if (!PermissionCheck(permission)) {
              HasPermission = false;
              break;
            }
          }
          return HasPermission;
        }
        function PermissionRequest(Arr) {
          var REQUEST_CODE_CONTACT = 101;
          if (Build.VERSION.SDK_INT >= 23) {
            MainActivity.requestPermissions(Arr, REQUEST_CODE_CONTACT);
          }
        }
        //如果没有权限，则申请权限
        if (!PermissionChecks(ArrPermissions)) {
          PermissionRequest(ArrPermissions); //此处申请权限，会弹出一个让你授权可获取设备号信息权限框
        } else {
          //如果拥有权限
          serial = Build.getSerial();
        }
      } else if (Build.VERSION.SDK_INT > Build.VERSION_CODES.N) {
        //8.0+
        if (Build.SERIAL) {
          serial = Build.SERIAL;
        }
      } else {
        if (SystemProperties.get("ro.serialno")) {
          serial = SystemProperties.get("ro.serialno");
        }
      }
      return serial;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./register.scss";
</style>